<!--
 - Author : wang885298.
 - Date   : 2019/3/29.
 - File   : houseMsg.房屋家庭成员组件
 -->

<template>
  <div class="houseWrap">
    <msg :title="title" :showMore=2 labelWidth="350px" :clickCB="close"
         pos="absolute">
      <div class="member-list">
        <div class="member-list-item" v-for="(item,index) in houseList" :key="index"
             @click="getGongmin(item)">
          <div class="member-list-item-line">
            <div class="member-list-item-line-left fz18">
              {{item.xingMing||'默认姓名'}}
            </div>
            <div class="member-list-item-line-right">
              <span class="owner" v-if="item.shiFouHz==='1'">户主</span>
              <span v-if="item.shiFouHz==='0'">住户</span>
            </div>
          </div>
          <div class="member-list-item-line">
            <div class="member-list-item-line-left">性　　别</div>
            <div class="member-list-item-line-right">{{item.xingBieMc||'暂无数据'}}</div>
          </div>
          <div class="member-list-item-line">
            <div class="member-list-item-line-left">联系电话</div>
            <div class="member-list-item-line-right">{{item.yiDongDh||'暂无数据'}}</div>
          </div>
          <div class="member-list-item-line">
            <div class="member-list-item-line-left">证件类型</div>
            <div class="member-list-item-line-right">{{item.zhengjianleixingmc||'暂无数据'}}</div>
          </div>
          <div class="member-list-item-line">
            <div class="member-list-item-line-left">证件号码</div>
            <div class="member-list-item-line-right">{{item.zhengjianhaoma||'暂无数据'}}</div>
          </div>
        </div>
      </div>
    </msg>
    <transition name="el-zoom-in-center">
      <memberDetailMsg class="memberDetailPos" :peopleDetail="peopleDetail" v-show="detailShow"
                       @closeDetail="detailShow=false"></memberDetailMsg>
    </transition>
  </div>
</template>

<script>
  import memberDetailMsg from '@/components/memberDetailMsg'

  export default {
    data() {
      return {
        detailShow: false,
        peopleDetail: {}
      }
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      houseList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    components: {
      memberDetailMsg
    },
    methods: {
      /**
       * 查看楼栋住户信息
       * @author whl
       */
      getGongmin(item) {
        this.detailShow = true
        let params = {
          gmxxZj: item.gmxxZj
        }
        this.$request.gongminGet(params).then(res => {
          if (!this.$utils.isEmptyObject(res)) {
            console.log('查看楼栋住户信息', res)
            this.peopleDetail = res
            this.detailShow = true
          }
        })
      },
      /**
       * 关闭楼栋列表
       * @author whl
       */
      close() {
        this.$emit('closeHouse')
      }
    }
  }
</script>

<style ref="stylesheet/lesss" lang="less">
  /*@import "../../assets/less/myElement";*/
  .houseWrap {
    .member-list {
      padding: 0 0 15px;
      height: 672px;
      overflow: auto;

      &-item {
        margin-bottom: 10px;
        background: #093259;
        padding: 15px;
        cursor: pointer;

        &-line {
          display: flex;
          color: #62dcff;
          font-size: 14px;
          margin-bottom: 6px;

          &-left {
            min-width: 65px;
            font-size: 14px;
          }

          &-right {
            color: #00ddc6;
            margin-left: 10px;

            span {
              display: inline-block;
              padding: 0 8px;
              border-radius: 4px;
              background: #04910e;
              border: 1px solid #00db0e;
              font-size: 14px;
              color: #fff;
            }
          }
        }
      }

      .member-list-item:last-child {
        margin-bottom: 0;
      }

      .member-list-item-line:last-child {
        margin-bottom: 0;
      }

      .member-list-item-line:first-child {
        color: #ffff;
        margin-bottom: 10px;
      }

      .fz18 {
        font-size: 18px;
      }

      .member-list-item-line:first-child, .member-list-item-line-right {
        span.owner {
          background: #ff8a00 !important;
          border: 1px solid #ffc600 !important;
        }
      }
    }

    .memberDetailPos {
      position: fixed;
      z-index: 9999;
      left: 930px;
      top: 100px;
    }
  }
</style>
